@extends('layouts.app')

@section('content')
<style type="text/css">
		.tongjitu_tb tr{height: 45px;}
</style>
<div class="main-content">
    <div class="btn-toolbar list-toolbar">
        <div class="form-all mg_t100">
            <h2 class="text-center mg_b36" style="font-weight:bold;">重点部位数量统计表</h2>
             <div class="chart_btns">
             	<button class="btn btn-default " id="tjt">查看统计图</button>
             	<!-- 	<button class="btn btn-default " id="dy">打印</button> -->
             	<button class="btn btn-default " id="dc"  onclick="daodwsl();">导出</button>
         </div>
          <div id="div_print">
		    <table class="table-form table-border w mg-auto tongjitu_tb" id="shili_tb2" style="margin-top: 30px;">
					<thead>
						<tr>
							<th colspan="11">重点部位数量统计表</th>
						</tr>
					</thead>
					<tbody>
						<tr class="thead">
							<td>地区</td>
							<td>重点部位数量</td>
						</tr>
						<tr>
							<td><input type="text" /></td>
							<td><input type="text" /></td>
						</tr>
					</tbody>

                      <input type="hidden" name="area" id="area" value=""/>


				</table>
		  </div>             
       </div>
    </div>
</div>
 <style>
	.btns {
		padding-left: 20px;
		margin-bottom: 10px;
	}
	.mg_b20{
		margin-bottom: 20px;
	}
</style>
<div id="shili_tb1" class="easyui-window" closed="true">
    <h2 class="text-center mg_b20">重点部位数量统计</h2>
    <div class="btns">
    	<button class="btn btn-default btn-sm" id="bzt">饼状图</button>
    	<button class="btn btn-default btn-sm" id="zzt">柱状图</button>
    	<button class="btn btn-default btn-sm" id="zxt">折线图</button>
    </div>
    <div id="zdbwshul" style="height:470px;width:600px;margin: 0 auto;"></div>
</div>

<script type="text/javascript">

    function daodwsl(){
    var area = $("input[name='area']").val();
    var url = "{{url('admin/tj/daozdbw')}}";
    //window.location.href = url+'?&status='+status+'&major_id='+major_id+'&add_time='+add_time;
    window.location.href = url+'?&id='+area;
}
</script>



<script type="text/javascript">
	
</script>
 <script type="text/javascript">
    	function load_city_data_from_menu(id){
                inp_click(id);
			tb_ajax(id);  //表格数据
			zdbwshul_fn(id) ;   //统计图数据
			console.log(id);
		}
		function load_area_data_from_menu(id){
                inp_click(id);
			tb_ajax(id);  //表格数据
			zdbwshul_fn(id);    //统计图数据
			console.log(id);
		}
		function load_org_data_from_menu(id){
                inp_click(id);
			tb_ajax(id);     //表格数据
			zdbwshul_fn(id);    //统计图数据
			console.log(id); 
		}
				
  </script>
<script src="{{ URL::asset('/') }}build/dist/echarts.js"></script>
<script>
$(function(){
	window.onload = function() {
	    var from = sessionStorage.getItem("from");
	    if(from == 'pageA') {
	        window.print();
	        sessionStorage.setItem("from","");
	    }
	}
})
</script>

<script type="text/javascript">
function inp_click(id){
    $("input[name='area']").val(id);
}
</script>



<script type="text/javascript">
	tb_ajax();
	 function tb_ajax(id){
         	$.ajax({
        	 	type:"POST",
        	 	url:"{{url('admin/bigapi/getzdbw')}}",
        	 	async:true,
        	 	data: {'id':id, '_token':'{{csrf_token()}}'},
        	    dateType: 'json',
        	    success : function(data){
        	    	var obj = {};
        	        var obj = jQuery.parseJSON(data);
        	           console.log(obj.city);
        	           $(".tongjitu_tb .thead").nextAll().remove();
        	           for(var i = 0 ;i<obj.city.length;i++){
        	           	    var data = [];
        	           		for( var x in obj.city[i]){
        	           			data.push(obj.city[i][x])
        	           		}
        	           		var inner_data = '<tr>'+
												 '<td>'+data[0]+'</td>'+
												 '<td>'+data[1]+'</td>'+
											 '</tr>'
						      	  $(".tongjitu_tb tr").eq(-1).after(inner_data);			 
        	           }
        	    }
        	    
        	 });
         }
</script>  
<script type="text/javascript">
var daTa ;

	
	//重点部位数量统计
var zdbwshul = echarts.init(document.getElementById('zdbwshul'));
zdbwshul_fn();
function zdbwshul_fn(id){
     	$.ajax({
    	 	type:"POST",
    	 	url:"{{url('admin/bigapi/getzdbw')}}",
    	 	async:true,
    	 	data: {'id':id, '_token':'{{csrf_token()}}'},
    	    dateType: 'json',
    	    success : function(data){
    	    	var obj = {};
    	        var obj = jQuery.parseJSON(data);
    	       /* if(obj.city.length == 0){
    	        	zdbwshul.clear();
    	        }else{
    	        	 tubiao5(obj.city)
    	        }*/
    	       daTa = obj.city;
    	    }
    	   
    	 });
 }

 $("#tjt").click(function(){
    	$('#shili_tb1').window({
			title: "编辑",
			width:'900',
			height:'600',
			minimizable:false,
			top:($(window).height() - 600) * 0.5,
			left:($(window).width() - 900) * 0.5,
			modal: true,
			closed: false,
			minimizable:false
		});
		zdbwshul.clear();
		setTimeout(function(){
			tubiao2(daTa);
		},200)
	})
		
 $("#bzt").click(function(){
		zdbwshul.clear();
		setTimeout(function(){
			tubiao1(daTa);
		},500)
	    
})

$("#zzt").click(function(){
		zdbwshul.clear();
	    setTimeout(function(){
			tubiao2(daTa);
		},500)
		
})
$("#zxt").click(function(){
		zdbwshul.clear();
	    setTimeout(function(){
			tubiao3(daTa);
		},500)
		
})

function tubiao1(datas){

 zdbwshul_option = {
    backgroundColor: '#2c343c',
    title: {
        left: 'center',
        top: 20,
        textStyle: {
            color: '#ccc'
        }
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    series : [
        {
            name:'单位数量',
            type:'pie',
            radius : '55%',
            center: ['50%', '50%'],
            data:datas,
            roseType: 'radius',
            label: {
                normal: {
                    textStyle: {
                        color: 'rgba(255, 255, 255, 0.3)'
                    }
                }
            },
            labelLine: {
                normal: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.3)'
                    },
                    smooth: 0.2,
                    length: 10,
                    length2: 20
                }
            },
            color: ['#1b56ea','#f24949', '#4ddade'],
            itemStyle: {
                normal: {
                    color: '',
                    shadowBlur: 200,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
			
            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
                return Math.random() * 200;
            }
        }
    ]
	}
 
// 使用刚指定的配置项和数据显示图表。
        zdbwshul.setOption(zdbwshul_option);	 
}


function tubiao2_jian(data){
	var data1 = [];
	for(var i = 0;i<data.length;i++){
		data1.push(data[i].name);
	}
	return data1;
}
function tubiao2_jian1(data){
	var data2 = [];
	for(var i = 0;i<data.length;i++){
		data2.push(data[i].value);
	}
	return data2;
}
function tubiao2(data){
	zdbwshul_option = {
    color: ['#3398DB'],
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            data : tubiao2_jian(data),
            axisTick: {
                alignWithLabel: true,
            },
              axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#000'
                            }
                        }
        }
    ],
    yAxis : [
        {
            type : 'value',
	          axisLabel: {
	                        show: true,
	                        textStyle: {
	                            color: '#000'
	                        }
	                   },
        }
    ],
    series : [
        {
            name:'重点部位数量',
            type:'bar',
            barWidth: '20%',
            data:tubiao2_jian1(data),
             itemStyle:{
                        normal:{
                            color:'#e84022'
                        }
                    }
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
        zdbwshul.setOption(zdbwshul_option);
}

function tubiao3_jian(data){
	var data1 = [];
	for(var i = 0;i<data.length;i++){
		data1.push(data[i].name);
	}
	return data1;
}
function tubiao3_jian1(data){
	var data2 = [];
	for(var i = 0;i<data.length;i++){
		data2.push(data[i].value);
	}
	return data2;
}
function tubiao3(data){
	zdbwshul_option = {
   
    tooltip : {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: 'transparent'
            }
        }
    },
    legend: {
        data:['单位数量'],
        textStyle:{    //图例文字的样式
	        color:'#fff',
	    }
    },
    toolbox: {
    	show:false,
        feature: {
            saveAsImage: {}
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'value',
            boundaryGap : false,
             axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#000'
                            }
                        }
        }
    ],
    yAxis : [
        {
            type : 'category',
            data : tubiao3_jian(data),
             axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#000'
                            }
                        }
        }
    ],
    series : [
        {
            name:'保卫人员数量',
            type:'line',
            stack: '总量',
            areaStyle: {normal: {}},
            data:tubiao3_jian1(data)
        },
       
      
       
    ]
};

// 使用刚指定的配置项和数据显示图表。
       zdbwshul.setOption(zdbwshul_option);	
}

</script>

@stop
